<template>
	<view class="container">
		<view class="header">
			<text class="allTask">全部工单</text>
		</view>
		<!-- 待办工单 -->
		<view class="todo">
			<u-card :border="false" padding="20">
				<view class="todo-content">
					<view v-for="task in taskingList" :key="task.taskId" class="task" @click="openTaskDetail(task.taskId)">
						<text class="task-id">{{ task.taskCode }}</text>
						<view class="task-location">
							<image class="task-img-location" src="/static/img/location.jpg" mode="cover"></image>
							<text class="task-text-location">{{ task.addr }}</text>
						</view>
						<text class="task-time">{{ task.createTime }}</text>
					</view>
				</view>
			</u-card>
		</view>

		<!-- 底部导航 -->
<!-- 		<view class="footer">
			<u-tabbar :list="tabbarList" :mid-button="false" />
		</view> -->
	</view>
</template>

<script>
	import {
		getUserDetail,
		getRank,
		acceptTask,
		cancelTask,
		completeTask,
		searchTasks
	} from '@/utils/api'; // 导入api.js中的方法

	export default {
		data() {
			return {
				//登录信息
				userInfo: {},
				//待办工单
				taskingList: [],
			
			};
		},
		onLoad() {
			this.loadUserInfo();
		const userId = this.userInfo.userId
		console.log("当前登录用户", userId)
			//获取工单列表
			let query = {
				userId: userId
			}
			this.getTaskList(query);
		},
		methods: {
		loadUserInfo() {
			this.userInfo = uni.getStorageSync('userInfo') || {};
			console.log("页面打开读取数据：", this.userInfo);
		},
			//打开页面
			openTaskDetail(taskId) {
				console.log("我需要跳转了")
				uni.navigateTo({
					url: `/pages/taskDetail/taskDetail?taskId=${taskId}`
				});
			},
			async getTaskList(query) {

				try {
					//先清空
					this.taskingList =[];
					const data = await searchTasks(query)
					this.taskingList = data.currentPageRecords;
				} catch (error) {
					console.error('获取工单信息失败', error);
				}
			}

		}
	};
</script>

<style lang="scss">
	.container {
		padding: 0px;
		background-color: #f8f8f8;
	}

	.header {
		width: 390px;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-image: url('/static/img/backgroud.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		box-sizing: border-box;
		border-radius: 8px;
		/* 添加圆角 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
	}

	.allTask {
		font-size: 30px;
		font-weight: bold;
		margin-bottom: 10px;
		padding-left: 110px;
		padding-top: 50px;
	}

	.todo {
		padding: 20px;
	}

	.clock-img {
		width: 40px;
		height: 30px;
		background-image: url(/static/img/clock.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		margin-right: 10px;
	}

	.todo-title {
		font-size: 30px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.task {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.task-id {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.task-location {

		margin-bottom: 15px;
	}

	.task-img-location {
		height: 20px;
		width: 30px;
		margin-right: 10px;
	}

	.task-text-location {
		font-size: 15px;
		color: #666;
	}

	.task-time {
		font-size: 12px;
		color: #999;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>